<template>
  <van-list
  class="detail-box"
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    offset="10"
    @load="onLoad"
  >

  <div v-for="item in list" :key="item.proid" @click="goGoodsDetail(item.proid)">
      <img :src="item.img1"/>
      <p class="title">{{item.proname}}</p>
      <p class="price">¥{{item.originprice}}</p>
    </div>
  </van-list>
</template>

<script>
import axios from "axios";

export default {
  name: "GoodsList",
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      count:1
    };
  },
  methods:{    
    onLoad() {
      console.log("onLoad",this.count);
      this.loading = true;
      axios({
        url: "/api/pro/list",
        params: {
          count: this.count,
        },
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.loading = false;
            this.list = [...this.list,...res.data.data]
            this.count++;
          }
        })
        .catch((err) => {
          console.log("商品列表获取失败err", err);
        });
    },
    goGoodsDetail(proid){
      // this.$router.push("/GoodsDetail/"+proid);

      this.$router.push({name:"GoodsDetail",params:{proid:proid}});
    }
  }
};
</script>

<style scoped>
.detail-box {
  width: 100%;
  font-size: 14px;
  column-count: 2;
  column-gap: 5px;
}

.detail-box div {
  width: 100%;
  text-align: center;
  break-inside: avoid;
}

.detail-box div img {
  width: 90%;
}

.title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.price {
  text-align: left;
}
</style>
</style>